<template>
  <div>
    <!-- <h1>个人中心</h1> -->
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name" @click-left="$router.back()" left-arrow />
    <!-- 
      个人资料
        通过是否登录来判断当前组件视图渲染的内容   
    -->
    <!-- 已登录状态 -->
    <div v-if="getUser" class="userinfo">
      <van-image
        round
        width="1.3rem"
        height="1.3rem"
        :src="getUser.avatarurl"
      />
      <p>{{getUser.nickname}}</p>
      <van-button @click="logout" type="primary" size="small">退 出</van-button>
    </div>
    <div v-else class="userinfo">
      <van-image
        round
        width="1.3rem"
        height="1.3rem"
        src="https://img2.baidu.com/it/u=1538349482,197015043&fm=26&fmt=auto"
      />
      <p>请登录信息</p>
      <van-button @click="$router.push('/login')" type="primary" size="small">登录 / 注册</van-button>
    </div>
    <!-- 单元格展示 -->
    <van-cell icon="location-o" title="单元格" is-link color="#ee0a24"/>
    <van-cell icon="paid" title="我的钱包" is-link value="剩余0U币" />
    <van-cell icon="qr-invalid" title="我的二维码" is-link />
    <van-cell icon="friends-o" title="我的小伙伴" is-link />
    <van-cell icon="underway-o" title="0元试用" is-link />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  methods: {
    //封装一个退出事件
    logout(){
      this.$store.dispatch('changeUser',false)
    }
  },
};
</script>

<style scoped>
.userinfo{
  text-align: center;
}
</style>